<template>
  <div class="muban-box">
    <!--单行表达式 表达式是有结果，有返回的 -->
    中{{message}}
    {{10>20?"true":"false"}}
    <!--  循环数组-->
    <ul>
      <li v-for="(item,index) in listshuzu" :key="index">{{item}}</li>
    </ul>
    <!-- 当是复杂后台数据数组 -->
    <ul>
      <li v-for="(item,index) in list.listshuzu" :key="index">{{item.age}}</li>
    </ul>
    <!-- 循环对象  name是key左边的  item是值右边的  index还是下标 -->
    <ul>
      <li v-for="(item,name,index) in listt" :key="index">{{name}}-{{item}}-{{index}}</li>
    </ul>
    <!-- 点击-->
    <p @click="dianji1">点击事件</p>
    <!-- 点击传参 第一个是传参，第二个是 -->
    <span @click="dianji1('hello',$event)">传参数</span>
    <!-- 点击传参 传参有何作用示例  当你下面的值是item。你想要的是点击哪个打印哪个，那么传参就用到了 -->
    <ul>
      <li @click="dianji(item)" v-for="(item,index) in listshuzu" :key="index">{{item}}</li>
    </ul>
    <!-- 知乎前端小妹vue事件处理视频看完 -->
    <!--表单处理  -->
    <div>
        <input type="text" name="nameUser" v-model="arr.nameUser">
        <input type="password" name="password" v-model="arr.password">
        <input type="text" name="sex" v-model="arr.sex">
        <button @click="huoquCLick">按钮</button>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "不中",
      listshuzu:["fds","sdf"],
      listt: {
        name: "dasd",
        age: 25,
        coloc: "d2"
      },
      list: {
        ha: true,
        name: "dasd",
        listshuzu: [
          {
            name: "dfs",
            age: 17
          },
          {
            name: "dfs",
            age: 18
          }
        ]
      },
      // 多个input也可以使用对象的方式；
      arr:{}
    };
  },
  methods: {
    dianji0(event) {
      console.log(event);
    },
    dianji1(data, event) {
      console.log(data);
      console.log(event);
    },
    dianji(item) {
      console.log(item);
    },
    huoquCLick(){
       console.log(this.arr);
    }
  }
};
</script>

<style>
</style>